<template>
  <div id="app" style="font-size:26px;font-weght:bold;margin:30px 0">
    <header class="header">
      <div v-for="(item,index) in topInputList" :key="index" class="everyBox">
        <span class="span">{{item.title}}：</span>
        <el-input  placeholder=""  v-model="item.text" :placeholder="item.title" class="top-input"></el-input>
      </div>
      <div class="everyBox slelctBox">
        <span class="span">支付状态：</span>
        <el-select  v-model="value1" placeholder="请选择" @change="opctionchangeOne">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
    </header>
    <div class="body">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        fit
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          show-overflow-tooltip
          prop="payment_id"
          label="支付单号"
          width="170">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="source_id"
          label="订单号"
          width="170">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="nickname"
          label="用户"
          width="150">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="status_text"
          label="状态"
          width="90">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="payment_text"
          label="支付方式"
          width="100">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="money"
          label="金额"
          width="100"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="trade_no"
          label="第三方支付号"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="ctime"
          label="支付时间"
          width="200"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="date"
          label="操作"
          width="130">
          <template slot-scope="scope">
            <el-button @click="checkOrder(scope.row)"  size="mini" >明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 60,]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog
      title="支付单查看"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-descriptions title="" :column="2">
        <el-descriptions-item label="支付单号">{{ orderDetails.payment_id }}</el-descriptions-item>
        <el-descriptions-item label="用户">{{orderDetails.nickname}}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{ orderDetails.payment_text }}</el-descriptions-item>
        <el-descriptions-item label="支付金额">{{ orderDetails.money }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ orderDetails.status_text }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ orderDetails.ctime }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ orderDetails.utime }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>





  </div>
</template>


<script>
import {payList} from "../../../utils/api";

export default {
  name: "payOrder",
  data(){
    return{
      token:sessionStorage.getItem("token"),
      dialogVisible:false,
      topInputList:[
        {title:'支付单号',text:''},
        {title:'第三方支付单号',text:''},
        {title:'订单号',text:''},
        {title:'手机号码',text:''},
      ],
      options1: [
        {
          value: '111',
          label: '请选择'
        }, {
          value: '1',
          label: '待支付'
        }, {
          value: '2',
          label: '支付成功'
        }, {
          value: '3',
          label: '其他'
        }],
      value1: '',
      loading: true,
      tableData: [],
      limit:10,
      currentPage:1,
      total:0,

      orderDetails:{},
    }
  },
  methods:{
    checkOrder(row){
      this.dialogVisible = true
      this.orderDetails = row
    },
    handleClose(){
      this.dialogVisible = false
      this.orderDetails={}
    },
    handleSizeChange(val) {
      this.limit = val
      // console.log(`每页 ${val} 条`);
      this.getList(this.token,this.currentPage,this.limit,this.topInputList[2].text,this.value1,this.topInputList[0].text,this.topInputList[1].text,this.topInputList[3].text)
    },
    // 第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList(this.token,this.currentPage,this.limit,this.topInputList[2].text,this.value1,this.topInputList[0].text,this.topInputList[1].text,this.topInputList[3].text)

      // this.getList(this.token,this.currentPage,this.limit,this.reship_id,this.order_id,this.aftersales_id,this.logi_no,this.mobile,this.status)
    },
    search(){
      this.getList(this.token,this.currentPage,this.limit,this.topInputList[2].text,this.value1,this.topInputList[0].text,this.topInputList[1].text,this.topInputList[3].text)

    },
    opctionchangeOne(e){

    },

    handleSelectionChange(){

    },
    getList(token,page, limit, source_id, status, id, trade_no, mobile){
      this.loading = true
      payList(token,page, limit, source_id, status, id, trade_no, mobile).then(res=>{
        if(res.data.status){
          this.tableData = res.data.data.data
          this.total = res.data.data.count
          this.tableData.forEach(item=>{
            if(item.status==1){
                item.status_text = '待支付'
            }
            if(item.status==2){
              item.status_text = '支付成功'
            }
            if(item.status==3){
              item.status_text = '其他'
            }
            if(item.payment_code=="wechatpay"){
              item.payment_text = '微信支付'
            }
          })
          let timer = setTimeout(()=>{
            this.loading = false
            clearTimeout(timer)
          },400)
        }else{
          if(res.data.msg =="token失效,请重新进行登录"){
            this.$router.push("/login");
          }
          this.$message.error(res.data.msg)
          this.loading = false
        }
      })
    },
  },
  created() {
    this.getList(this.token,this.currentPage,this.limit,this.topInputList[2].text,this.value1,this.topInputList[0].text,this.topInputList[1].text,this.topInputList[3].text)
  },
  watch:{
    value1(n,o){
      if(n==111){
        this.value1 = ''
      }
      this.status = this.value1
    },

  }
}
</script>

<style scoped>
.body{
  margin: 20px 0;
}
.slelctBox{
  margin: 0 10px;
}
.everyBox{
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.header .span{
  font-size: initial;
}
/deep/.header{
  background: white!important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.top-input{
  width: 150px;
  margin-right: 20px;
}
/deep/.el-table th.el-table__cell>.cell{
  text-align: center;
}
/deep/.el-table .cell.el-tooltip{
  text-align: center;
}
/deep/.el-table--border .el-table__cell:first-child .cell{
  text-align: center;
}
/deep/.el-table--enable-row-transition .el-table__body td.el-table__cell{
  text-align: center;
}
.contentBox{
  width: 50%;
}
.contentBox .span{
  width: 40%;
}
</style>
